<template>
  <div class="container">
    <p v-color="c1">hello world</p>
    <p v-color="c2" v-hello>hello world</p>
    <p v-color="c3">hello world</p>
    <input type="text" v-focus>
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'

export default {
  components: { MyTest },
  data () {
    return {
      c1: 'red',
      c2: 'blue',
      c3: 'green',
      uname: 'zhangsan'
    }
  },

  // directives 用于定义自定义指令
  directives: {
    color: {
      bind (el, obj) {
        el.style.color = obj.value
      },
      update (el, obj) {
        el.style.color = obj.value
      }
    },
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>
